import React, { useState } from 'react';
import {MenuFoldOutlined,MenuUnfoldOutlined,UserSwitchOutlined, AppleOutlined , HomeOutlined, YoutubeOutlined, CompassOutlined, TagOutlined, PieChartOutlined, MailOutlined ,CopyOutlined ,EnvironmentOutlined } from '@ant-design/icons';
import { Layout, Menu,Dropdown ,MenuProps } from 'antd';
import {useSelector,useDispatch} from 'react-redux'
import { useNavigate,Outlet} from 'react-router-dom'
import MyBread from '../../components/MyBread';
import './index.scss'

const { Header, Sider, Content } = Layout;

const App: React.FC = () => {

  var [collapsed,setCollapsed] = useState(false)
  var userInfo = useSelector((state:any)=>state.userInfo)
  var keyPath = useSelector((state:any)=>state.keyPath)
  var dispatch = useDispatch()
  var navigate = useNavigate()

  type MenuItem = Required<MenuProps>['items'][number];

  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem;
  }

  // 左侧菜单列表
  const items: MenuItem[] = [
    getItem('首页', '/index/home', <HomeOutlined style={{ fontSize: '24px', color: '#00bcd4' }} />),
    getItem('轮播图管理', 'swiper', <YoutubeOutlined style={{ fontSize: '24px', color: '#ffeb3b' }}/>, [
      getItem('轮播图列表', '/index/swiper'),
    ]),
    getItem('账户管理', 'admin', <CompassOutlined style={{ fontSize: '24px', color: '#00bcd4' }}/>, [
      getItem('管理员列表', '/index/admin'),
    ]),
    getItem('产品管理', 'pro', <TagOutlined style={{ fontSize: '24px', color: '#ff5722' }}/>, [
      getItem('产品列表', '/index/pro'),
      getItem('秒杀列表', '/index/seckill'),
      getItem('推荐列表', '/index/command'),
      getItem('筛选列表', '/index/search')
    ]),
    getItem('数据可视化', 'echarts', <PieChartOutlined style={{ fontSize: '24px', color: '#22f1ff' }}/>, [
      getItem('echarts使用', '/index/echarts'),
    ]),
    getItem('编辑器管理', 'editor', <MailOutlined style={{ fontSize: '24px', color: '#00bcd4' }}/>, [
      getItem('编辑器管理', '/index/editor'),
    ]),
    getItem('Excel管理', 'excel', <CopyOutlined style={{ fontSize: '24px', color: '#d46600' }}/>, [
      getItem('excel管理', '/index/excel'),
    ]),
    getItem('地图管理', 'map', <EnvironmentOutlined style={{ fontSize: '24px', color: '#00bcd4' }}/>, [
      getItem('百度地图', '/index/map'),
    ]),
  ];
  
  // 点击左侧菜单
  var handleClick = ({ item,key,keyPath }:any)=>{
    console.log(keyPath);
    
    dispatch({type:'SAVE_KEYPATH',payload:keyPath})
    navigate(key)
  }

  // 退出登录
  var exit =()=>{
    dispatch({type:'REMOVE_USERINFO'})
    // dispatch({type:'REMOVE_KEYPATH'})
    navigate('/login')
  } 

  // 下拉菜单列表
  const dropdownitems: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <div>设置</div>
      ),
    },
    {
      key: '2',
      label: (
        <div onClick={exit}>退出</div>
      ),
    }
  ]

  // 控制菜单点开或者收起
  var handleCollapse =()=>{
    setCollapsed(!collapsed)
  }

  return (
    <Layout>
      {/* 左侧菜单 */}
      <Sider className='left' trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" >
          <AppleOutlined className='icon'/>
          <div className="title">{ !collapsed && '嗨购后台管理' }</div>
        </div>
        <Menu className='left-menu'
          // defaultSelectedKeys={['/index/home']}
          defaultOpenKeys={keyPath}
          selectedKeys={keyPath}
          theme="dark"
          mode="inline"
          items={items}
          onClick={handleClick}
        />
      </Sider>


    
      {/* 右侧模块 */}
      <Layout className="site-layout">
        <Header className='top'>
          <div className="top-left" onClick={handleCollapse}>
            {
              collapsed ? 
              <MenuUnfoldOutlined /> :
              <MenuFoldOutlined />
            }
          </div>
          <div className="top-right">
            欢迎 &nbsp; {userInfo.adminname} &nbsp; 
            <Dropdown menu={{ items: dropdownitems }} placement="bottom" arrow>
              <UserSwitchOutlined style={{ fontSize: 26 }}/>
            </Dropdown>
          </div>
        </Header>

        <Content className='ppp' style={{padding:20}}>
          {/* 面包屑 */}
          <MyBread/>
          {/* 占位组件 */}
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;


